﻿@{
    ViewBag.Title = "价格工时设置";
}

<div class="row">
    <div class="col-xs-12">
        <p>
            <div class="row">
                <div class="col-sm-6">
                    <div class="input-group-btn">
                        类别:
                        <select id="query-category"></select>
                        门店:
                        <select id="query-station"></select>
                        <button class="btn btn-sm btn-info" id="btnRefresh">
                            <i class="icon-refresh bigger-110"></i>刷新
                        </button>
                        <button class="btn btn-sm btn-primary" id="btnEdit" style="display:none">
                            <i class="icon-plus bigger-110"></i>设置
                        </button>
                    </div>
                </div>
                <div class="col-sm-6 right">
                </div>
            </div>
        </p>
        <div class="table-responsive">
            <table id="businessTable" class="table table-striped table-bordered table-hover">
                <thead>
                    <tr>
                        <th><input type="checkbox" id="selectAll" /></th>
                        <th>服务分类</th>
                        <th>编号</th>
                        <th>名称</th>
                        <th>工时单价</th>
                        <th>折扣</th>
                        <th>技师提成</th>
                        <th>比例/金额</th>
                        <th>销售提成</th>
                        <th>比例/金额</th>
                        <th>销项税</th>
                        <th>操作</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="setModal" tabindex="-1" role="dialog"
     aria-labelledby="setModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width:60%;">
        <div class="modal-content">
            <div class="modal-header">
                @*<button type="button" class="close"
                            data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>*@
                <h4 class="modal-title" id="setModalLabel">
                    设置价格与工时
                </h4>
            </div>
            <div class="modal-body">
                <div class="tabbable">
                    <ul class="nav nav-tabs" id="setTabPanel">
                        <li class="active">
                            <a data-toggle="tab" href="#setTabInfo">
                                <i class="green icon-home bigger-110"></i>
                                单价工时
                            </a>
                        </li>
                        <li>
                            <a data-toggle="tab" href="#setTabScope">
                                适用门店
                                <span class="badge badge-danger" id="setSelectItemCount">0</span>
                            </a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div id="setTabInfo" class="tab-pane in active">
                            <form class="form-horizontal" role="form" id="formNew">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label no-padding-right" for="setName"> 名称 </label>
                                    <div class="col-sm-4">
                                        <input type="hidden" id="setServiceItemId"/>
                                        <input type="text" id="setName" class="col-xs-12 col-sm-12" readonly="readonly" />
                                    </div>
                                    <label class="col-sm-2 control-label no-padding-right" for="setPrice"> 工时单价 </label>
                                    <div class="col-sm-4">
                                        <input type="text" id="setPrice" class="col-xs-12 col-sm-12"/>
                                    </div>
                                </div>
                                <div class="space-4"></div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label no-padding-right" for="setDiscount"> 折扣 </label>
                                    <div class="col-sm-4">
                                        <input type="text" id="setDiscount" class="col-xs-12 col-sm-12" />
                                    </div>
                                    <label class="col-sm-2 control-label no-padding-right" for="setTaxRate"> 销项税 </label>
                                    <div class="col-sm-4">
                                        <input type="text" id="setTaxRate" class="col-xs-12 col-sm-12" />
                                    </div>
                                </div>
                                <div class="space-4"></div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label no-padding-right" for="setTechnicianCommissionType"> 技师提成 </label>
                                    <div class="col-sm-4">
                                        <select id="setTechnicianCommissionType" class="col-xs-12 col-sm-12">
                                            <option value="1">不提成</option>
                                            <option value="2">固定金额</option>
                                            <option value="3">百分比</option>
                                        </select>
                                    </div>
                                    <label class="col-sm-2 control-label no-padding-right" for="setTechnicianCommission"> 比例/金额 </label>
                                    <div class="col-sm-4">
                                        <input type="text" id="setTechnicianCommission" class="col-xs-12 col-sm-12" />
                                    </div>
                                </div>
                                <div class="space-4"></div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label no-padding-right" for="setSalesCommissionType"> 销售提成 </label>
                                    <div class="col-sm-4">
                                        <select id="setSalesCommissionType" class="col-xs-12 col-sm-12">
                                            <option value="1">不提成</option>
                                            <option value="2">固定金额</option>
                                            <option value="3">百分比</option>
                                        </select>
                                    </div>
                                    <label class="col-sm-2 control-label no-padding-right" for="setSalesCommission"> 比例/金额 </label>
                                    <div class="col-sm-4">
                                        <input type="text" id="setSalesCommission" class="col-xs-12 col-sm-12" />
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div id="setTabScope" class="tab-pane">
                            <div class="table-responsive">
                                <table id="setStationTable" class="table table-striped table-bordered table-hover">
                                    <thead>
                                        <tr>
                                            <th style="width:40px;"><input type="checkbox" id="setSelectAll" /></th>
                                            <th>编号</th>
                                            <th>名称</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">
                    关闭
                </button>
                <button type="button" class="btn btn-primary" id="btnSubmitSet">
                    提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
@section inlineScript
{
    <script type="text/javascript">
        var oTable = null;
        var g_promise = new Promise();
        var g_stationArray = null;
        var g_bNeedRefresh = true;
        $(document).ready(function () {
            $('#com-search-input').bind('keypress', function (event) {
                if (event.keyCode == "13") {
                    queryAdvertisementList();
                }
            });
            $('#com-search-icon').on('click', function () {
                queryAdvertisementList();
            });
            $('#btnRefresh').on('click', function () {
                if (g_bNeedRefresh) {
                    queryAdvertisementList();
                    g_bNeedRefresh = false;
                }
            });
            $('#query-category').on('change', function () {
                g_bNeedRefresh = true;
            });
            $('#query-station').on('change', function () {
                g_bNeedRefresh = true;
            });
            $('#selectAll').on('change', function () {
                var bChecked = $('#selectAll').prop('checked');
                $('input[name=selectItem]').each(function (index, element) {
                    $(element).prop('checked', bChecked);
                });
            });
            $('#setSelectAll').on('change', function () {
                var bChecked = $('#setSelectAll').prop('checked');
                $('input[name=setSelectItem]').each(function (index, element) {
                    $(element).prop('checked', bChecked);
                });
            });
            $('#btnDelete').on('click', function () {
                var idArray = [];
                $('input[name=selectItem]').each(function (index, element) {
                    if (element.checked) {
                        idArray.push($(element).attr('data-id'));
                    }
                });
                onDeleteMany(idArray);
            });
            $('#btnSubmitSet').on('click', function () {
                if (window.confirm('是否要保存价格工时设置?') == false)
                    return;
                var stationIdArray = null;
                if ($('#setSelectAll').prop('checked')) {
                    // apply to all
                } else {
                    stationIdArray = [];
                    $('input[name=setSelectItem]').each(function (index, element) {
                        if (element.checked) {
                            stationIdArray.push($(element).attr('data-id'));
                        }
                    });
                    if (stationIdArray.length == 0) {
                        alert('需要选择适用的门店!');
                        return;
                    }
                }

                var retain = {};
                retain.ServiceItemId = $('#setServiceItemId').val();
                retain.Discount = $('#setDiscount').val();
                retain.Price = $('#setPrice').val();
                retain.TaxRate = $('#setTaxRate').val();
                retain.SalesCommissionType = $('#setSalesCommissionType').val();
                retain.SalesCommission = $('#setSalesCommission').val();
                retain.TechnicianCommissionType = $('#setTechnicianCommissionType').val();
                retain.TechnicianCommission = $('#setTechnicianCommission').val();
                $.ajax({
                    type: "POST",
                    url: "@Url.Content("~/api/asms/Create/ServiceItemRetain")",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data: JSON.stringify({ 'ServiceItemRetain': retain, 'StationIdArray': stationIdArray }),
                    success: function (data) {
                        if (data.isSuccess) {
                            alert('设置成功!');
                            $('#setModal').modal('hide');
                            queryAdvertisementList();
                        } else {
                            alert(data.message);
                        }
                    },
                    error: function (data) {
                        alert('error');
                    }
                });
            });
            loadCategoryList().then(loadPrivateStationList).then(queryAdvertisementList);
        });

        function loadPrivateStationList() {
            $.ajax({
                type: "Get",
                url: "@Url.Content("~/api/asms/Query/PrivateStationPagedList")",
                data: { "filter": null, "status": 1, 'start': 0, 'limit': 9999 },
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    if (result.isSuccess) {
                        g_stationArray = result.data.items;
                        $('#query-station option').remove();
                        $('#query-station').append('<option value="" selected="selected">全部</option>');
                        for (var index = 0; index < g_stationArray.length; index++) {
                            $('#query-station').append("<option value='" + g_stationArray[index].id + "'>" + g_stationArray[index].name + "</option>");
                        }
                        g_promise.resolve();
                    } else {
                        alert(result.message);
                        g_promise.reject();
                    }
                },
                error: function (data) {
                    alert('error');
                    g_promise.reject();
                }
            });
            return g_promise;
        };

        function loadCategoryList() {
            $.ajax({
                type: "Get",
                url: "@Url.Content("~/api/asms/Query/ServiceCategoryList")",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    if (result.isSuccess) {
                        var selectCategory = $('#query-category');
                        $('#query-category').append('<option value="" selected="selected">全部</option>');
                        for (var index = 0; index < result.data.items.length; index++) {
                            selectCategory.append('<option value="' + result.data.items[index].id + '">' + result.data.items[index].name + '</option>');
                        }
                        g_promise.resolve();
                    } else {
                        alert(result.message);
                        g_promise.reject();
                    }
                },
                error: function (data) {
                    alert('error');
                    g_promise.reject();
                }
            });
            return g_promise;
        };

        function queryAdvertisementList() {
            var selectedCategoryId = $('#query-category').val();
            if (selectedCategoryId == null) {
                return;
            }
            if (oTable) {
                oTable.fnClearTable();
            }
            oTable = $("#businessTable").dataTable({
                bRetrieve: true,
                "bLengthChange": false, //改变每页显示数据数量
                "iDisplayLength": 20,
                "bFilter": false, //过滤功能
                "bProcessing": false, // 是否显示取数据时的那个等待提示
                "bServerSide": true,//这个用来指明是通过服务端来取数据
                "sAjaxSource": "@Url.Content("~/API/ASMS/Query/PrivateServiceItemPagedList")",//这个是请求的地址
                "fnServerData": retrieveData, // 获取数据的处理函数
                "aoColumns": [
                    {
                        //"sTitle": "Name",
                        "sWidth": '40px',
                        mData: null,
                        bSortable: false,
                        "mRender": function (data, type, full) {
                            return '<input type="checkbox" name="selectItem" data-id="' + full.id + '"/>';
                        }
                    },
                    {
                        "sWidth": '100px',
                        mData: "categoryName",
                        bSortable: false
                    },
                    {
                        "sWidth": '80px',
                        mData: "code",
                        bSortable: false
                    },
                    {
                        mData: "name",
                        bSortable: false
                    },
                    {
                        "sWidth": '90px',
                        bSortable: false,
                        mData: "price",
                        mRender: function (data, type, full) {
                            return data;
                        }
                    },
                    {
                        "sWidth": '90px',
                        bSortable: false,
                        mData: "discount",
                        mRender: function (data, type, full) {
                            if (data >= 1) {
                                return '无折扣'
                            }
                            return data * 10 + '折';
                        }
                    },
                    {
                        sWidth: '90px',
                        bSortable: false,
                        mData: "salesCommissionType",
                        mRender: function (data, type, full) {
                            if (data == 1) {
                                return '无提成';
                            } else if (data == 2) {
                                return '固定金额';
                            } else if (data == 3) {
                                return '按比例';
                            }
                            return '无提成';
                        }
                    },
                    {
                        "sWidth": '90px',
                        bSortable: false,
                        mData: "salesCommission",
                        mRender: function (data, type, full) {
                            return data;
                        }
                    },
                    {
                        sWidth: '90px',
                        bSortable: false,
                        mData: "technicianCommissionType",
                        mRender: function (data, type, full) {
                            if (data == 1) {
                                return '无提成';
                            } else if (data == 2) {
                                return '固定金额';
                            } else if (data == 3) {
                                return '按比例';
                            }
                            return '无提成';
                        }
                    },
                    {
                        "sWidth": '90px',
                        bSortable: false,
                        mData: "technicianCommission",
                        mRender: function (data, type, full) {
                            return data;
                        }
                    },
                    {
                        "sWidth": '90px',
                        bSortable: false,
                        mData: "taxRate",
                        mRender: function (data, type, full) {
                            return (data * 100) + '%';
                        }
                    },
                    {
                        "sWidth": '100px',
                        mData: null,
                        bSortable: false,
                        "mRender": function (data, type, full) {
                            return '<div class="btn-group"><a href="javascript:void(0)" onclick="onSetting(this);" data-id="' + full.id + '" data-name="' + full.name + '" data-price="' + full.price + '" data-taxRate="' + full.taxRate + '" data-tc="' + full.technicianCommission + '" data-tct="' + full.technicianCommissionType + '" data-sc="' + full.salesCommission + '" data-sct="' + full.salesCommissionType + '" class="btn btn-xs btn-info">设置</a></div>';
                        }
                    }
                ]
                //,"aoColumnDefs": [{ "bSortable": false, "aTargets": [0, 1, 2, 3] }]
            });
        }

        // 3个参数的名字可以随便命名,但必须是3个参数,少一个都不行
        function retrieveData(sSource, aoData, fnCallback) {
            var start = 0;
            var limit = 0;
            var propertyNames = new Array();
            var sortIndex = 0;
            var sortDirection;
            for (var index = 0; index < aoData.length; index++) {
                if (aoData[index].name == 'iDisplayStart') {
                    start = aoData[index].value;
                } else if (aoData[index].name == 'iDisplayLength') {
                    limit = aoData[index].value;
                } else if (aoData[index].name.indexOf('mDataProp_') == 0) {
                    propertyNames.push(aoData[index].value);
                } else if (aoData[index].name.indexOf('iSortCol_') == 0) {
                    sortIndex = aoData[index].value;
                } else if (aoData[index].name.indexOf('sSortDir_') == 0) {
                    sortDirection = aoData[index].value;
                }
            }
            $.ajax({
                url: sSource,//这个就是请求地址对应sAjaxSource
                data: {
                    'filter': $('#com-search-input').val(),
                    'status': 1,
                    'categoryId': $('#query-category').val(),
                    'stationId': $('#query-station').val(),
                    'start': start,
                    'limit': limit
                },//, sortName: propertyNames[sortIndex], sortDirection: sortDirection },
                type: 'get',
                dataType: 'json',
                async: false,
                success: function (result) {
                    if (result.isSuccess) {
                        fnCallback({
                            sEcho: aoData[0].value,
                            iTotalRecords: result.data.total,
                            iTotalDisplayRecords: result.data.total,
                            aaData: result.data.items
                        });
                    }
                },
                error: function (msg) {
                }
            });
        };
        function onSetting(el) {
            $('#setModal').modal({});
            $('#setServiceItemId').val($(el).attr('data-id'));
            $('#setName').val($(el).attr('data-name'));
            $('#setPrice').val($(el).attr('data-price'));
            $('#setTaxRate').val($(el).attr('data-taxRate'));
            $('#setTechnicianCommission').val($(el).attr('data-tc'));
            $('#setTechnicianCommissionType').val($(el).attr('data-tct'));
            $('#setSalesCommission').val($(el).attr('data-sc'));
            $('#setSalesCommissionType').val($(el).attr('data-sct'));
            $('#setStationTable tr:gt(0)').remove();
            $('#setSelectAll').prop('checked', true);
            for (var index = 0; index < g_stationArray.length; index++) {
                $('#setStationTable').append('<tr><td><input name="setSelectItem" type="checkbox" checked="checked" onchange="onChangeSetSelectItem(this);" data-id="' + g_stationArray[index].id + '"/><td>' + g_stationArray[index].number + '</td></td><td>' + g_stationArray[index].name + '</td></tr>');
            }
            $('#setSelectItemCount').html(g_stationArray.length);
        };
        function onChangeSetSelectItem(el) {
            var count = 0;
            $('input[name=setSelectItem]').each(function (index, element) {
                if (element.checked) {
                    count++;
                } else {
                    $('#setSelectAll').prop('checked', false);
                }
            });
            $('#setSelectItemCount').html(count);
        };
    </script>
}
